"use client"

import React, {useState, useRef} from 'react' //这是先放react的加载句
// @ts-ignore //这一个注释是忽略警告，就这样以注释的形式放在这里就可以了
import {LuckyWheel} from '@lucky-canvas/react'//放我引用页面元素的那个网页

export function LuckyWheelPage() {//export语句，把具体设置都放到这里面来

    const [blocks] = useState([
        {padding: '10px', background: '#628e55', imgs: [{src: "https://bugstack.cn/images/system/blog-03.png"}]}
    ])

    const [prizes] = useState([
        {background: '#dff4ca', fonts: [{text: '0'}]},
        {background: '#99bc8f', fonts: [{text: '1'}]},
        {background: '#dff4ca', fonts: [{text: '2'}]},
        {background: '#99bc8f', fonts: [{text: '3'}]},
        {background: '#dff4ca', fonts: [{text: '4'}]},
        {background: '#99bc8f', fonts: [{text: '5'}]},
    ])
    const [buttons] = useState([
        {radius: '40%', background: '#986b37'},
        {radius: '35%', background: '#fff5a7'},
        {
            radius: '30%', background: '#ffc96a',
            pointer: true,
            fonts: [{text: 'START', top: '-10px'}]
        }
    ])
    const myLucky = useRef()

    //以下是一个return的标签
    return <div>
        <LuckyWheel
            ref={myLucky}
            width="300px"
            height="300px"
            blocks={blocks}
            prizes={prizes}
            buttons={buttons}
            onStart={() => { // 点击抽奖按钮会触发star回调 //抽奖动作
                // @ts-ignore
                myLucky.current.play()
                setTimeout(() => {//延时
                    const index = Math.random() * 6 >> 0//随机数抽奖//这里应该是会接服务端接口，然后返回一下抽奖结果
                    // @ts-ignore
                    myLucky.current.stop(index)
                }, 2500)
            }}
            onEnd={//结束，告诉你抽到哪个奖品
                // @ts-ignore
                prize => {
                    alert('恭喜你抽到 ' + prize.fonts[0].text + ' 号奖品')
                }
            }
        />
    </div>
}